.page{
    height: 100vh;
    padding-bottom: 10px;
    display: flex;
    flex-direction: column;
}

.card-box{
    background: #262932;
    border-radius: 10px;
}

.module-title{
    color: #6ec3fe;
    font-size: 20px;
    margin: 0;
}

.page-header{
    height: 75px;
    text-align: center;
    padding-top: 10px;
    .title{
        color: #6ebbfe;
        font-size: 36px;
    }
}

.body{
    flex: 1;
    padding:0 16px;
    margin-top: 20px;

    .body-container{
        display: flex;
        height: 100%;
        overflow-y: auto;
    }
}

.left-part{
    flex: 32;
    display: flex;
    flex-direction: column;
}

.center-part{
    flex: 36;
    padding:0 11px;
    display: flex;
    flex-direction: column;
}

.right-part{
    flex: 32;
    display: flex;
    flex-direction: column;
}


.left-card-box-1{
    padding:15px 15px;
    flex: 66;
}

.agent-rank{
    padding-left: 15px;
    margin-top: 15px;
}

.agent-rank-table{
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;

    th, td{
        white-space: nowrap;
        text-align: left;
        vertical-align: middle;
    }

    th{
        font-size: 14px;
        background:transparent;
        font-weight: normal;
		white-space: nowrap;
        color: #d1d1d1;
    }

    td{
        padding:10px 0;
        color: #fff;
        font-size: 14px;

        &.no{
            width: 35px;
            font-family: '思源黑体';
            font-style: italic;
            font-size: 22px;

            &.no-0 {
                color: #fd2020;
            }
            &.no-1 {
                color: #ffa210;
            }
            &.no-2 {
                color: #9a6efe;
            }
            &.no-3 {
                color: #0becc4;
            }
            &.no-4 {
                color: #0becc4;
            }
        }

        &.income{
            width: 110px;
            font-size: 14px;
        }

        &.device{
            width: 100px;
            font-size: 14px;
        }

        &.port-count{
            width: 80px;
            font-size: 14px;
        }
    }
}

.end-reason{
    margin-top: 30px;

    .wrap{
        margin-top: 10px;
    }
}


.left-card-box-2{
    flex: 34;
    margin-top: 12px;
    padding:15px 15px;
    display: flex;
    flex-direction: column;

    .legend{
        position: absolute;
        right: 90px;
        top: 50%;
        transform: translateY(-50%);
    }
}



.right-card-box-1{
    flex: 37;
    .card-box{
        padding:15px 15px 0 15px;
    }
}

.right-part-2{
    flex: 63;
    display: flex;
    flex-direction: column;
    margin-top: 12px;

}

.right-card-box-2{
    flex: 28;
    .card-box{
        padding:15px 15px 5px 15px;
    }
}
.right-card-box-3{
    flex: 34;
    margin-top: 12px;
    
    .card-box{
        padding:15px 15px;
    }
}






.today-data{
    display: flex;
    padding-top: 15px;
    .item{
        flex: 1;
        text-align: center;
        .name{
            font-size: 14px;
            margin-bottom: 10px;
            color: #becded;
        }
        .num{
            font-size: 32px;
            color: #6e9cfe;
            font-weight: bold;
        }
        .unit{
            font-size: 12px;
            color: #b6c5e4;
            margin-left: 5px;
        }
    }
}

.data-grid{
    display: grid;
    grid-gap: 4px;
    grid-template-columns: repeat(3, 1fr);

    .wrap{
        height: 100px;
        background-color: #272d37;
        border-radius: 10px;
        position: relative;

        .content{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            white-space: nowrap;
            text-align: center;
        }
    }

    .name{
        font-size: 14px;
        margin-bottom: 10px;
        color: #becded;
    }
    .num{
        font-size: 24px;
        color: #6e9cfe;
        font-weight: bold;
    }
    .unit{
        font-size: 12px;
        color: #b6c5e4;
        margin-left: 5px;
    }
}



.center-part-1{
    flex: 37;
    display: flex;
    flex-direction: column;

    
    .part-1{
        flex: 1;
    }
}


.center-part-2{
    flex: 63;
    margin-top: 12px;
    position: relative;
}

.map-container{
    height: 400px;
}


.order-list{
	position: absolute;
    width: 100%;
    height: 300px;
    left: 12px;
    bottom: 0;

	.item{
		display: flex;
        align-items: center;
		font-size:14px;
        margin-top: 10px;
        &:first-child{
            margin-top: 0;
        }
		.icon{
			width:18px;
			height:18px;
			background:no-repeat center;
			background-image:url(@/assets/images/device_1.png);
			&.device_1 {
				background-image:url(@/assets/images/device_1.png);
			}
			&.device_2 {
				background-image:url(@/assets/images/device_2.png);
			}
			&.device_3 {
				background-image:url(@/assets/images/device_3.png);
			}
		}
		
		&.start{
			color:#6ec3fe;
		}
		
		&.fail{
			color:#f9696c;
		}
		
		&.end{
			color:#8ecb83;
		}
		
	}
}


.date-type{
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);

    
}